@media screen and (max-width:599px) {
  :root {
  }


/* ===== MAIN: 메인비주얼 (모바일) ===== */
/* fixed 헤더 높이 = 전 폭 16.69vw 실측. PC 의 calc(var(--px)*122) 는 모바일에서 24px 로 접혀 38.6px 가려졌다 */
.main {
  margin-top: 16.7vw;
}
.main__bg {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
}

/* IMG:AUTO 래퍼 폭은 calc(var(--px)*N) — 모바일에서 --px 가 0.197 로 무너지므로 해제하고 크기는 img 가 소유 */
.main_iner {
  gap: 2vw;
}

.main__brand-mark,
.main__menu-item--01,
.main__menu-item--02,
.main__menu-item--03,
.main__menu-item--04,
.main__menu-item--05 {
  width: auto;
  aspect-ratio: auto;
}

.main__brand-mark img {
  width: 24vw !important;
  height: auto !important;
}

/* 유저 확정값 — 토큰(--displayS 17.33vw)은 375 폭을 넘겨 raw 예외 */
.main__title {
  font-size: 9.2vw;
}

/* 위로 겹쳐 올라오는 .main__visual 이 desc 를 덮지 않도록 띠 전체를 내린다 */
.main__menu-flow {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  margin-top: 14vw;
  mask-image: none;
  -webkit-mask-image: none;
}

.main__menu-item {
  margin-right: 4vw;
}

.main__menu-item img {
  width: 30vw !important;
  height: auto !important;
}

/* 누끼 띠 위에 겹쳐 가운데 — 음수 margin 으로 흐름 자리에서 끌어올린다 */
.main__visual {
  position: relative;
  right: auto;
  top: auto;
  width: 50vw;
  aspect-ratio: 1 / 1;
  margin-top: -42vw;
  border-radius: 3vw;
}

/* 슬라이드는 프레임 폭을 따라간다 — 고정 387 이 모바일에서 76px 로 접혀 5장이 한꺼번에 노출됐다 */
.main__visual-slide {
  width: 100%;
}



/* ===== CON01 (모바일) ===== */
.con01_iner {
  padding-bottom: 12vw;
}

.con01__ribbon {
  padding: 3vw 0 2.8vw;
}

.con01__divider {
  gap: 3vw;
  padding: 0 5vw;
  box-sizing: border-box;
  margin-top: 3vw;
  width: 100%;
}

.con01__divider-rule {
  width: auto;
  flex: 1;
}

.con01__divider-mark {
  width: 6vw;
}

.con01__lead {
  margin-top: 8vw;
  padding: 0 5vw;
}

.con01__hero-photo {
  width: 90vw;
  margin-top: 5vw;
  border-radius: 3vw;
}

.con01__hero-emblem {
  position: relative;
  left: auto;
  bottom: auto;
  width: 20vw;
  margin-top: -10vw;
  z-index: 1;
}

.con01__quotes {
  display: block;
  width: 100%;
  overflow: hidden;
  margin-top: 6vw;
}

.con01__quotes-track {
  display: flex;
}

.con01__quote {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 5.5vw 0;
}

.con01__quote-text,
.con01__quote.con01__quote--active .con01__quote-text {
  line-height: 1.2;
}

.con01__quote,
.con01__quote--active {
  opacity: .4;
}

.con01__quote.swiper-slide-active {
  opacity: 1;
}

.con01__quotes .con01__quote .con01__quote-glow {
  /* TEXT-WIDTH: img 래퍼 — quote-glow 는 이미지 원 크기(aspect-ratio 145/145)를 소유, 흐름 텍스트 아님 */
  opacity: 0;
  width: 22vw;
}

.con01__quote.swiper-slide-active .con01__quote-glow {
  opacity: 1;
}

.con01__quotes .con01__quote.con01__quote--active .con01__quote-text {
  color: #4c2c1b;
}

.con01__quote.swiper-slide-active .con01__quote-text {
  color: #3b2316;
}

.con01__title {
  margin-top: 8vw;
  padding: 0 5vw;
}

.con01__desc {
  margin-top: 3vw;
  padding: 0 5vw;
}

.con01__stats {
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 3vw;
  margin-top: 8vw;
  padding: 0 5vw;
  width: 100%;
  box-sizing: border-box;
}

.con01__stat {
  width: 43vw;
  padding: 5vw 0;
  border-radius: 4vw;
}



/* ===== CON02 (모바일) ===== */
/* 하단 padding = 흐름에서 빠진 ocean 밴드(word 높이 + bottom 여백)가 앉을 자리 */
.con02_iner {
  align-items: center;
  padding: 0 0 32vw;
}

.con02__side-rule {
  display: none;
}

/* 사진이 상단 100vw 를 다 먹어 PC 자리엔 안 보인다 — 본문 뒤 바탕결로 재배치. 흐름 자식(static)보다 아래로 깔려면 음수 z 가 필요하다 */
.con02_iner > .con02__hero-band {
  left: -15vw;
  top: 75vw;
  width: 130vw;
  z-index: -1;
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
}

/* PC 실측 = 장수촌 카드와 top·height 동일 · 카드 왼쪽 밖 71px ~ 카드 안 42px. 카드폭 비율 169/352 로 환산 */
/* 높이는 IMG:AUTO 자연비(113/539)가 소유 — 카드 높이 106vw 에 맞는 폭을 역산해 박지 않는다 */
.con02_iner > .con02__compare-fold {
  right: 40vw;
  top: 162.7vw;
  bottom: auto;
  width: 22.2vw;
}

/* PC 가 .con02_iner > 자식 셀렉터라 같은 특이도로 받아야 absolute 가 풀린다 */
/* 상단 25% 는 팔만 있어 잘라낸다 — 비율은 래퍼가, 크롭 기준은 img 의 object-position 이 소유 */
.con02_iner > .con02__hero-dish {
  position: relative;
  left: auto;
  top: auto;
  width: 100vw;
  aspect-ratio: 871 / 652;
  overflow: hidden;
}
.con02__hero-dish img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* 사진이 상단을 차지하므로 데코는 그 아래 타이틀 우상단으로 내린다 */
.con02_iner > .con02__blossom {
  right: 1vw;
  top: 73vw;
  width: auto;
}
.con02__blossom img {
  width: 22vw;
  height: auto;
}

.con02__content {
  margin-left: 0;
  width: 90vw;
  align-items: center;
  text-align: center;
  margin-top: 8vw;
}

.con02__head {
  align-items: center;
  gap: 3vw;
}

.con02__head-mark {
  width: auto;
}
.con02__head-mark img {
  width: 6vw;
  height: auto;
}

.con02__content > .con02__head-desc {
  margin-top: 6vw;
}

.con02__content > .con02__lead {
  margin-top: 10vw;
}

.con02__content > .con02__compare {
  margin-top: 6vw;
  gap: 3vw;
}

.con02__compare > .con02__rival-card {
  width: 43vw;
  padding-bottom: 4vw;
  border-radius: 3vw;
}

.con02__rival-head {
  padding: 3vw 0;
  border-radius: 3vw 3vw 0 0;
}

.con02__rival-card > .con02__rival-list {
  width: auto;
  margin-left: 0;
  margin-top: 1vw;
}

.con02__compare > .con02__brand-card {
  width: 45vw;
  padding-bottom: 5vw;
  border-radius: 3vw;
}

.con02__brand-head {
  padding: 3.5vw 0;
  border-radius: 3vw 3vw 0 0;
}

.con02__brand-card > .con02__brand-list {
  width: auto;
  margin-left: 0;
  margin-top: 1vw;
}

.con02_iner > .con02__quote {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  align-items: center;
  gap: 5vw;
  margin-top: 10vw;
}

/* 왼쪽은 PC 처럼 화면 밖에서 들어오고, 오른쪽 끝은 아래 인용 텍스트 열에 맞춘다 — 전폭이면 orn 이 화면 모서리에 박힌다 */
.con02__quote-divider {
  width: 100%;
  padding-right: 11vw;
  box-sizing: border-box;
  gap: 3vw;
}

.con02__quote-rule {
  width: auto;
  flex: 1;
}

.con02__quote-orn {
  width: auto;
}
.con02__quote-orn img {
  width: 16vw;
  height: auto;
}

.con02__quote-body {
  gap: 4vw;
}

.con02__quote-body > .con02__quote-thumb {
  width: auto;
  border-radius: 2vw;
}
.con02__quote-body > .con02__quote-thumb img {
  width: 55vw;
  height: auto;
}

.con02__quote-body > .con02__quote-open {
  margin-left: 4vw;
}

.con02__quote-body > .con02__quote-close {
  margin-left: 2vw;
}

/* BLUE 글자 왼쪽 — OCEAN 행 위에 걸치지 않게 워드 상단행 높이로 올린다 */
.con02_iner > .con02__ocean-emblem {
  right: 40vw;
  bottom: 19vw;
  width: auto;
}
.con02_iner > .con02__ocean-emblem img {
  width: 8vw;
  height: auto;
}

/* background 단축은 background-clip 을 초기화해 글자 대신 사각형이 칠해진다 — image 만 교체 */
.con02__ocean-word--gradient {
  right: -3vw;
  bottom: 3vw;
  width: 60vw;
  background-image: linear-gradient(90deg, #271b14 45vw, #634a3c 88vw);
}


/* ===== CON03 (모바일) ===== */
.con03_iner {
  padding: 6vw 0;
}

.con03_box {
  width: 92vw;
  border-radius: 1.5vw;
}

.con03_box_iner {
  box-sizing: border-box;
  padding: 9vw 4vw 8vw;
}

.con03__ornament {
  width: 6vw;
}

.con03__title {
  margin-top: 3vw;
}

.con03__lead {
  line-height: 1.5;
  margin: 4vw 0;
}

.con03__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  width: 100%;
  gap: 3vw;
  margin-top: 2vw;
}

.con03__card {
  box-sizing: border-box;
  width: auto;
  aspect-ratio: 234 / 154;
  padding: 7vw 0;
  border-radius: 3.5vw;
}

.con03__desc {
  margin-top: 6vw;
}


/* ===== CON04 (모바일) ===== */
.con04_iner {
  box-sizing: border-box;
  padding: 13vw 5vw 10vw;
}

.con04__frame {
  display: none;
}

.con04__head-title {
  margin: 3vw 0 6vw;
}

/* 풀블리드 — .con04_iner 의 좌우 padding 5vw 를 음수 마진으로 되돌린다 */
.con04__stats {
  width: 100vw;
  margin-inline: -5vw;
}

.con04__stats .con04__stat {
  gap: 4vw;
  padding: 8vw 6vw;
  border-radius: 4vw;
}

.con04__stat-facts {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vw 3vw;
  padding: 2vw 4vw;
  border-radius: 2vw;
}

.con04__stat-divider {
  padding-block: 1vw;
}

/* 2줄 wrap 되는 3항목 pill 에서 줄 끝에 홀로 남는 구분선 */
.con04__stat-divider--wrap {
  display: none;
}


/* ===== CON05 (모바일) ===== */
.con05_iner {
  flex-direction: column;
  padding: 12vw 5vw 10vw;
}

.con05__intro {
  align-items: center;
  width: 100%;
  gap: 5vw;
  margin-top: 0;
  text-align: center;
}

.con05__chart-col {
  align-items: stretch;
  width: 100%;
  gap: 6vw;
  margin-top: 8vw;
}

/* radius 는 PC 가 calc(var(--px)*25) 라 모바일 --px 축에서 4.9px 로 무너진다 — 카드와 같은 5vw 로 되돌린다 */
.con05__chart-panel {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 8vw;
  padding: 7.5vw 3vw 6vw;
  border-radius: 5vw;
}

.con05__chart-title {
  text-align: center;
  line-height: 1.2;
}

.con05__chart {
  width: 100%;
}

.con05__chart-grid {
  width: 100%;
}

.con05__chart-bars {
  width: 78.41%;
  right: 10.72%;
}

.con05__chart-line {
  width: 77.97%;
  right: 10.87%;
  top: -5.11vw;
}

/* 풀블리드 — .con05_iner 의 좌우 padding 5vw 를 음수 마진으로 되돌리고 같은 값을 padding 으로 넣어
   카드 여백은 그대로 두면서 다음 카드가 화면 끝까지 흐르게 한다 (content 폭 90vw 불변 = 카드 폭 불변) */
.con05__rates {
  align-self: stretch;
  box-sizing: border-box;
  width: 100vw;
  margin-inline: -5vw;
  padding-inline: 5vw;
}

/* 카드 폭이 PC 197px 급으로 좁아졌으므로 안쪽 여백·radius 도 PC 비율(20.8% / 4.57% / 12.7%)로 환산한다 */
.con05__rate-card {
  text-align: center;
  gap: 2.4vw;
  padding: 7vw 0 6vw;
  border-radius: 6.5vw;
}

.con05 .con05__nav {
  justify-content: center;
  gap: 3vw;
}

.con05 .con05__nav-prev,
.con05 .con05__nav-next {
  width: 11vw;
  height: 11vw; /* HEIGHT: con06 nav 버튼 정사각 규격 그대로 이식 (유저 지시) */
  border-radius: 2.6vw;
  background-color: #634a3c;
  cursor: pointer;
}

.con05 .con05__nav-arrow {
  font-family: var(--font-suit);
  font-size: var(--subheadS);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.36;
  text-align: center;
  color: #ffffff;
}

.con05__chart-note {
  text-align: center;
  line-height: 1.4;
}

.con05__rate-label,
.con05__rate-value,
.con05__rate-fact {
  line-height: 1.3;
}

.con05__intro-note {
  line-height: 1.4;
}


/* ===== CON06 (모바일) ===== */
.con06 {
  background-image: radial-gradient(ellipse 63vw 22.05vw at 50% 0, rgba(236, 217, 166, 0.16), rgba(236, 217, 166, 0) 70%);
}

.con06 .con06_iner {
  gap: 0;
  padding: 16vw 0 14vw;
}

.con06__head-title,
.con06__desc {
  padding-inline: 6vw;
}

.con06 .con06__carousel {
  flex-wrap: wrap;
  row-gap: 6vw;
  column-gap: 5vw;
  margin-top: 28vw; /* dish 상반부(반지름 25vw)가 head 텍스트와 안 겹치는 여유 */
}

/* 카드는 88vw(좌우 6vw 여백)지만 overflow:visible 이라 넘어오는 카드가 여백을 통과한다.
   실제 클리핑은 section{overflow:hidden} 이 화면 끝에서만 하므로 박스 경계가 안 보인다. */
.con06 .con06__slider {
  order: -1;
  width: 88vw;
  flex: 0 0 88vw;
  overflow: visible;
}

.con06 .con06__nav-prev,
.con06 .con06__nav-next {
  width: 11vw;
  height: 11vw;
  margin-top: 0;
  border-radius: 2.6vw;
}

.con06 .con06__card {
  gap: 5vw;
  padding: 30vw 6vw 8vw;
}

.con06 .con06__card-title {
  margin-right: 0;
}

.con06__card-meta {
  flex-direction: column;
  gap: 1.5vw;
}

.con06 .con06__card-meta-sales,
.con06 .con06__card-meta-profit {
  flex: none;
  padding: 0;
  text-align: center;
}

.con06__chart-graph {
  width: 78vw;
}

.con06 .con06__chart-rate {
  top: 26.63vw;
  font-size: 11vw;
}

.con06 .con06__dish {
  right: auto;
  bottom: auto;
  left: 25vw;
  width: 50vw;
  top: 40.63vw; /* 실측: card.top(65.63vw, iner 로컬) − 반지름(25vw) */
}

/* PC margin-top 19.44px 이 모바일에서 3.8px 로 무너져 nav 와 붙는다 */
.con06 .con06__desc {
  margin-top: 10vw;
}


/* ===== CON07 (모바일) ===== */
.con07_iner {
  padding: 16vw 0 14vw;
}

.con07__eyebrow {
  width: 55vw;
}

.con07__title {
  margin-top: 3.2vw; /* PC 20px --px 축 붕괴(3.9px) 보정 — 캔버스vw×폰트스케일 재계산 */
}

.con07__title,
.con07__desc,
.con07__summary {
  padding-inline: 6vw; /* 실측: 좌우 0 밀착 — con06 관례 */
}

.con07__desc {
  margin-top: 3.2vw;
}

.con07__steps {
  flex-direction: column;
  gap: 6vw;
  margin-top: 5vw;
}

.con07__step {
  width: 88vw;
  border-radius: 5.9vw; /* PC 30px/447px=6.71% 비율 복원 (붕괴값 1.79%→ 5.9vw=22.1px/330px=6.7%) */
}

.con07__step-head {
  padding: 4.3vw 0;
}

.con07__path,
.con07__path-dot {
  display: none;
}

.con07__result {
  margin-top: 3.79vw;
}

.con07__cook-time {
  font-size: 15.4vw;
  margin-top: 1vw;
  margin-right: 2.45vw; /* PC 18px 상쇄값을 15.4vw 폰트 스케일에 맞춰 재비례 */
}

.con07__cook-note {
  margin-top: -1.77vw; /* 실측 겹침 11.2px 반영 재계산: PC -13/113.24=-11.5% × 15.4vw */
}

.con07__stay {
  width: 50vw;
  margin-top: 4vw; /* 유저 DevTools 확정값 — 검산/재계산 금지 */
  padding: 2.61vw 0 1.39vw; /* 유저 확정: 내부 위/아래 시각여백 대칭 각 14px (padT=14-lab_hl4.2, padB=14-val_hl8.8) */
  border-radius: 2.73vw; /* PC 10px/183px=5.46% 비율 복원 (붕괴값 1.05%→ 2.73vw=10.2px/187.5px=5.46%) */
}

.con07__stay-label {
  line-height: 1.6; /* PC 3.62 는 --px 축 미세조정값 — 모바일은 정상 행간으로 재설정 */
}

.con07__stay-value {
  margin-top: -2.23vw; /* 라벨→값 시각여백 목표 4.6px 역산 (lab_hl 4.2px + val_hl 8.8px 포함) */
}

.con07__bonus {
  width: 26vw;
  right: -17vw; /* 유저 DevTools 확정값 — 검산/재계산 금지 */
  bottom: -4.1vw; /* 유저 DevTools 확정값 — 검산/재계산 금지 */
}

.con07__summary {
  margin-top: 5.56vw; /* 유저 DevTools 확정값 — 검산/재계산 금지 */
}

.con07__dish {
  width: 55vw; /* 유저 지시: 가시 좌변 262.5px 유지한 채 확대 */
  right: -25vw; /* 55vw 폭에서 좌변 262.5 유지하도록 재산출: 100vw-(262.5+55vw)/375*100 */
  bottom: -45.58vw; /* 재실측: 다른 세션의 stay margin-top(6vw→4vw) 반영으로 iner.bottom 7222.64→7215.14px 이동 → 카드3 bottom(6890.97px) 대비 dish top 여유 7px 재확보하도록 역산 */
  z-index: -1; /* .con07__result(static) 뒤로 보내되 .front 컨텍스트 안에서만 낮춤 */
}

.con07__dish img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 37%, transparent 57%); /* 재실측: summary margin-top 5.56vw 반영 후 겹침 39.5~54.2% → 시작마진 −2%p·끝마진 +3%p 재적용 */
  mask-image: linear-gradient(to bottom, #000 0%, #000 37%, transparent 57%);
}

/* ===== CON08 (모바일) ===== */
/* 여백은 PC 캔버스비(/1905)를 그대로 쓰면 --px 축과 같이 접힌다 — 모바일 폰트 스케일 기준으로 재설계 */
.con08_iner {
  gap: 8vw;
  padding: 16vw 0 16vw;
}

/* desc 가 뷰포트 좌우 끝에 닿아 좌우 여백을 head 가 소유한다 */
.con08__head {
  padding: 0 5vw;
}

.con08__head-eyebrow {
  line-height: 1.3; /* PC 0.96666 는 --px 축 미세조정값 — 모바일은 정상 행간 */
}

.con08__head-title {
  margin-top: 2.5vw;
  line-height: 1.15; /* PC 0.92727 는 --px 축 미세조정값 — 모바일은 정상 행간 */
}

.con08__head-desc {
  margin-top: 4vw;
  line-height: 1.5; /* PC 1.2 는 --px 축 미세조정값 — 모바일은 정상 행간 */
}

/* 부모가 align-items:center 라 shrink-to-fit — 폭을 확정하지 않으면 viewport 의 100% 가 순환 참조로 폭주한다 */
.con08__slider {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  gap: 6vw 4vw;
}

.con08__slider-viewport {
  order: -1;
  width: 100%;
}

.con08__slider-prev,
.con08__slider-next {
  width: 12vw; /* 원자 UI — 카드 대비 탭 가능 크기로 유지, PC 캔버스비 그대로면 9px 로 소실 */
  height: 12vw;
  margin-top: 0;
  border-radius: 2.6vw; /* PC 10/47 = 버튼 대비 21.3% 재비례 — --px 축 그대로면 2px 로 접힘 */
}

/* 메뉴명 위아래 여백 — PC 값은 캔버스비라 4.5/5.9px 로 접힌다. 위아래 대칭으로 재설정 */
.con08__menu-card {
  gap: 4.5vw;
  padding-bottom: 4.5vw;
  border-radius: 4vw; /* PC 20/406 = 카드폭 대비 4.9% 재비례 */
}

.con08__menu-photo {
  width: 100%;
  border-radius: 4vw; /* 카드와 동일 곡률 */
}

.con08__menu-name {
  line-height: 1.3; /* PC 0.91 는 --px 축 미세조정값 — 모바일은 정상 행간 */
}

.con08__corner-top-left,
.con08__corner-top-right,
.con08__corner-bottom-left,
.con08__corner-bottom-right {
  width: auto;
  height: auto;
}

.con08__corner-top-left img,
.con08__corner-top-right img,
.con08__corner-bottom-left img,
.con08__corner-bottom-right img {
  width: 18.7vw !important;
  height: auto !important;
}

.con08__corner-top-left {
  top: 1.42vw;
  left: 2.83vw;
}

.con08__corner-top-right {
  top: 1.42vw;
  right: 2.94vw;
}

.con08__corner-bottom-left {
  bottom: 1.89vw;
  left: 2.83vw;
}

.con08__corner-bottom-right {
  bottom: 1.89vw;
  right: 2.94vw;
}

/* ===== con09 ===== */
.con09_iner {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12vw 5vw 10vw;
}

/* 패널 배경은 계단 노치 + 골드 헤어라인을 이미지가 소유한다 — radius/overflow 로 클립하면 노치가 잘린다 */
.con09_box {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  border-radius: 0;
  overflow: visible;
}

.con09_box > img {
  height: auto;
}

.con09_box_iner {
  box-sizing: border-box;
  padding: 10vw 6vw 9vw;
  gap: 4vw;
}

/* PC 는 gap 24 + margin 10 = 34px — 같은 1.4배를 모바일 gap 4vw 위에 얹는다 */
.con09__panel-desc {
  margin-top: 1.7vw;
}

.con09__panel-mark {
  width: auto;
  aspect-ratio: auto;
}

.con09__panel-mark img {
  width: 10vw;
  height: auto;
}

.con09__panel-emblem {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  margin-top: -0.5vw; /* 배경이 자연비로 박스보다 39px 내려와 있어 여기가 밑변 절반 걸침 지점 */
}

.con09__panel-emblem img {
  width: 24vw;
  height: auto;
}

.con09__stat-col--cost,
.con09__stat-col--result {
  align-items: center;
  width: 100%;
  gap: 8vw;
  margin-top: 8vw;
}

.con09__stat-col--cost .con09__stat-item,
.con09__stat-col--result .con09__stat-item {
  align-items: center;
  margin-left: 0;
  gap: 2vw;
}

/* 배지가 접힌 동안 label 이 중앙에 오도록 gap 도 같이 연다 (애니 phase 의 is-active 가 트리거) */
.con09__stat-head {
  margin-left: 0;
  gap: 0;
  transition: gap .4s ease;
}

.con09__stat-item.is-active .con09__stat-head {
  gap: 2vw;
}

/* 폭 0 으로 접어 빈자리를 없애고, overflow:hidden(PC 정본) 덕에 열릴 때 왼쪽부터 드러난다 */
.con09__stat-num {
  width: 0;
  min-width: 0;
  aspect-ratio: auto;
  border-radius: 1.2vw;
  opacity: 0;
  transition: width .4s ease, opacity .4s ease;
}

.con09__stat-item.is-active .con09__stat-num {
  width: 6vw;
  opacity: 1;
}

.con09__stat-num img {
  width: 6vw;
  height: auto;
}

/* PC 는 gap 8 + margin 11 = 19px — 같은 2.4배를 모바일 gap 2vw 위에 얹는다 */
.con09__stat-desc {
  margin-top: 2.8vw;
}

.con09__stat-col--cost .con09__divider,
.con09__stat-col--result .con09__divider {
  width: 100%;
}

.con09__stat-col--cost .con09__divider + .con09__stat-item,
.con09__stat-col--result .con09__divider + .con09__stat-item {
  margin-top: 0;
}

/* 유저 승인 결정 2 — stat2/stat3 사이 신규 구분선 (기존 divider와 동일 시각) */
.con09__stat-col--cost::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: #fadfb4;
  opacity: 0.2;
}

/* ===== CON10 모바일 ===== */
.con10_iner {
  padding-bottom: 0;
}

.con10__panel {
  order: 1;
  width: 95vw;
  padding: 13vw 0;
}

.con10__head {
  gap: 2.5vw;
}

/* PC 1.009 는 2줄 기준 잉크 bbox 보정 — 모바일은 3줄이라 행간을 벌린다 */
.con10__head-title {
  line-height: 1.25;
}

.con10__body {
  flex-direction: column;
  align-items: center;
  margin-top: 6vw;
  padding: 0 5vw;
  gap: 5vw;
}

/* 유저 지시 — 카드 2장 세로 적층 → 가로 1열 */
.con10__stat-list {
  flex-direction: row;
  width: 100%;
  margin-top: 0;
  gap: 3vw;
}

.con10__stat {
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  padding: 6vw 3vw 3.5vw;
  border-radius: 4vw;
}

.con10__stat-value {
  line-height: 1.3;
}

.con10__map {
  width: 80vw;
  margin-left: 8vw;
  align-items: center;
}

.con10__map-shape {
  width: 100%;
}

.con10__map-zone--near {
  width: 25.636%;
  left: 2.119%;
  top: 10.669%;
}

.con10__map-zone--far {
  width: 82.839%;
  left: 1.059%;
  top: 15.287%;
}

.con10__map-pin {
  width: 4.873%;
}

.con10__map-pin:nth-of-type(3) {
  left: 27.966%;
  top: 36.624%;
}

.con10__map-pin:nth-of-type(4) {
  left: 13.983%;
  bottom: 34.554%;
}

.con10__map-pin:nth-of-type(5) {
  right: 34.534%;
  bottom: 33.758%;
}

.con10__map-pin:nth-of-type(6) {
  right: 28.602%;
  top: 46.338%;
}

.con10__promise {
  margin-top: 0;
  margin-left: 0;
  gap: 5vw;
  width: 100%;
  text-align: center;
}

.con10__promise-title {
  line-height: 1.3;
}

.con10__promise-title-em {
  font-size: 5.6vw;
}

.con10_box {
  order: 3;
  width: 95vw;
}

/* width 선언(.front 100% / 95vw)에 좌우 padding 이 더해져 부모를 넘던 것 차단 — PC 는 좌우 padding 0 이라 없던 문제 */
.con10_box_iner {
  box-sizing: border-box;
  padding: 6vw 5vw;
}

/* PC 1.167 은 2줄 기준 잉크 bbox 보정 — 모바일은 3줄이라 행간을 벌린다 */
.con10__footer-text {
  line-height: 1.45;
}

.con10__brand {
  box-sizing: border-box;
  order: 2;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 95vw;
  padding: 0 0 8vw;
  background: #ffffff;
  border-left: 1px solid #cfae74;
  border-right: 1px solid #cfae74;
}

.con10__brand-rule--left,
.con10__brand-rule--right {
  flex: 1;
  width: auto;
}

.con10__brand-mark {
  width: 47vw;
  margin: 0 3vw;
}

.con11_iner {
  flex-direction: column;
  align-items: center;
  padding: 14vw 0 12vw;
}

.con11__head {
  align-items: center;
  gap: 4vw;
  margin-top: 0;
  width: 100%;
  padding: 0 8vw;
  box-sizing: border-box;
}

.con11__gallery {
  width: 100%;
  margin-top: 8vw;
  -webkit-mask-image: none; /* 모바일은 centeredSlides 라 왼쪽만 페이드하면 비대칭 */
  mask-image: none;
}

.con11__gallery-track {
  gap: 0;
}

.con11__gallery-item--portrait {
  width: 50vw;
  aspect-ratio: 299 / 398;
}

.con11__gallery-item--landscape {
  width: 54vw;
  aspect-ratio: 323 / 263;
}

.con11__gallery-item--landscape-lg {
  width: 74vw;
  aspect-ratio: 444 / 362;
}

/* con12 — 3WAY 매출 구조 */
.con12_iner {
  padding-top: 10vw;
}

.con12__title {
  padding: 0 8vw;
  box-sizing: border-box;
}

.con12__frame {
  top: 3vw;
  left: 50%;
  transform: translateX(-50%);
  width: 92vw;
}

.con12__backdrop {
  top: 38vw;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%);
  width: 90vw;
}

.con12__dish {
  position: relative;
  bottom: auto;
  left: auto;
  width: auto;
  aspect-ratio: auto;
  margin: 12vw auto 10vw;
}

.con12__dish img {
  width: 84vw;
  height: auto;
}

.con12__node {
  width: 20vw;
}

.con12__node--delivery {
  top: 37vw;
  left: 50%;
  transform: translateX(-50%);
}

.con12__node--hall {
  top: 67vw;
  left: calc(50% - 38vw);
  transform: translateX(-50%);
}

.con12__node--togo {
  top: 67vw;
  right: auto;
  left: calc(50% + 38vw);
  transform: translateX(-50%);
}

.con12__stats {
  padding: 6vw 6vw 3vw;
}

.con12__note {
  padding: 0 6vw 5vw;
  text-align: center;
}

.con12__stat {
  width: 44vw;
  gap: 2.6vw;
  padding: 4vw 0 5vw;
}

.con12__badge {
  top: 90vw;
  bottom: auto;
  right: auto;
  left: calc(50% + 23vw);
  transform: translateX(-50%);
  width: 52vw;
}

.con12__band {
  padding: 11vw 0 10vw;
}

.con12__band-bg {
  top: 0;
  right: auto;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.con12__band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con12__band-desc {
  padding: 0 8vw;
  box-sizing: border-box;
}

/* con13 — 음식 사진 밴드 */
.con13_iner {
  /* HEIGHT: 흐름 자식 0, 200px 밴드 (M2 목업 승인) */
  height: 53.3333vw;
}

/* con14 — 고객 리뷰 */
.con14_iner {
  align-items: center;
  padding: 14vw 8vw 0;
}

.con14__review-marquee {
  left: -50vw;
  bottom: 84.5vw;
}

.con14__bowl {
  left: -15vw;
  width: 70vw;
  opacity: .16;
  z-index: 0;
}

.con14__content,
.con14__intro,
.con14__headline {
  align-items: center;
}

.con14__content {
  width: 100%;
  gap: 8vw;
}

.con14__intro {
  flex-direction: column;
  gap: 6vw;
}

.con14__headline {
  width: 100%;
  gap: 3vw;
  margin-top: 0;
}

.con14__quote {
  width: auto;
  aspect-ratio: auto;
  margin-top: 3vw;
  margin-left: 0;
}

.con14__quote img {
  width: 8vw;
  height: auto;
}

/* PC 의 width:max-content 는 block 폭을 글자만큼 줄여 text-align 이 span 안쪽에만 걸린다 */
.con14__title-line {
  width: auto;
}

.con14__keywords {
  text-align: center;
}

.con14__keywords-line,
.con14__keywords-rest {
  margin: 0 auto;
}

/* PC 밑줄 두께 calc(var(--px)*1) 은 모바일에서 --px 가 0.2 로 무너져 0.2px 로 사라진다 — raw px 고정 */
.con14__keywords-line {
  background-size: 0% 1px;
}

.con14__keywords-line--on {
  background-size: 100% 1px;
}

.con14__review-viewport {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: auto;
  align-self: stretch;
  margin: 13vw -8vw 0;
  padding: 10vw 0;
  background-color: #bdad94;
  box-sizing: border-box;
}

.con14__review-track {
  margin-top: 0;
}

.con14__review-slide img {
  border-radius: 3vw;
}

/* con15 — 창업비용 */
.con15_iner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "stack"
    "panel";
  justify-items: center;
  row-gap: 6vw;
  padding: 12vw 0 10vw;
}

.con15__head {
  grid-area: head;
  gap: 4vw;
}

/* PC 관리블록 lh:3 은 1줄 전제 — 모바일 2줄에서 행간 3배로 드러난다 */
.con15__subtitle {
  line-height: 1.5;
}

.con15__cost-table,
.con15__consult-frame,
.con15__consult-card {
  grid-area: stack;
  align-self: center;
}

.con15__cost-table,
.con15__consult-frame {
  position: relative;
  top: auto;
  left: auto;
}

/* 블러 배경 실루엣 — blur 반경은 --px 가 0.2 로 무너지는 구간이라 vw 직접값 */
.con15__cost-table {
  width: 100%;
  filter: blur(.55vw);
}

/* 셀 좌여백은 calc(var(--px)*N) 이 모바일에서 접혀 사라진다 — 열 폭 비율로 되돌린다 */
.con15__cost-table tbody th,
.con15__cost-table tbody td {
  padding-left: 2vw;
}

.con15__cost-table thead th:nth-child(1),
.con15__cost-table thead th:nth-child(2),
.con15__cost-table thead th:nth-child(3),
.con15__cost-table tfoot th,
.con15__cost-table tfoot td:first-of-type {
  padding-left: 2vw;
}

.con15__consult-frame {
  width: 88vw;
}

.con15__head-mark {
  width: 15vw;
}

.con15__consult-card {
  width: 88vw;
  margin-top: 0;
  padding: 10vw 0 13vw;
  gap: 6vw;
}

.con15__consult-logo {
  width: 24vw;
}

.con15__consult-copy {
  gap: 6vw;
}

.con15__consult-contact {
  gap: 2vw;
}

.con15__recovery-panel {
  grid-area: panel;
  width: 92vw;
  margin-top: 0;
  padding: 8vw 6vw;
  gap: 2vw;
  border-radius: 3vw; /* 비율 복원(1.63vw=6px)은 모바일에서 라운드가 안 보인다 — 카드 관행 3vw */
}

/* PC 1줄 전제의 lh 1.09 는 모바일 2줄에서 붙는다 */
.con15__recovery-title {
  line-height: 1.35;
}

/* con16 — 창업절차 */
.con16_iner {
  gap: 8vw;
  padding: 12vw 6vw 10vw;
  box-sizing: border-box;
}

.con16__head {
  gap: 3vw;
}

.con16__eyebrow {
  gap: 4vw;
}

.con16__head-mark {
  width: 22vw;
}

/* flex row 타이틀 375px 오버플로 대비 */
.con16__title {
  flex-wrap: wrap;
}

.con16__steps {
  width: 100%;
  gap: 3vw;
}

.con16__step-row {
  flex-direction: column;
  gap: 3vw;
}

/* 래퍼 폭만 덮고 IMG:AUTO 비율은 유지 */
.con16__step-card {
  width: 70vw;
}

.con16__step-arrow {
  width: 2.7vw;
  transform: rotate(90deg);
}

/* con17 — 매장안내: 목업 순서 = 지도 → 목록 */
/* 하단 padding 은 absol 하단 띠(38px = 10.1vw)가 앉을 자리 + 목록과의 여백 */
.con17_iner {
  padding: 12vw 5vw 15vw;
}

.con17__content {
  width: 100%;
  gap: 6vw;
}

.con17__head {
  gap: 2vw;
}

.con17__body {
  flex-direction: column;
  gap: 3.5vw;
}

/* PC radius(--px*N)가 20px→3.9px 로 접혀 라운드가 사라진다 — 패널·드롭다운 일괄 재지정 */
.con17__map-panel {
  order: -1;
  flex: none;
  width: 100%;
  border-radius: 4vw;
}

.con17__store-list {
  flex: none;
  width: 100%;
  height: 90vw; /* HEIGHT: 유저 승인 — 모바일 매장목록 스크롤 리스트 유지 */
  border-radius: 4vw;
}

.con17__store-bar {
  width: 1.6vw;
  margin: 2.6667vw 0;
}

.con17__store-thumb {
  border-radius: 1.6vw;
}

.con17__store-items {
  padding: 6vw 5vw;
  gap: 4vw;
}

.con17__store-item {
  gap: 2vw;
  padding-bottom: 4vw;
}

.con17__search {
  padding: 4vw 5vw;
}

.con17__search-fields {
  gap: 3vw;
}

.con17__filter-trigger {
  gap: 2vw;
}

.con17__filter-menu {
  min-width: 32vw;
  padding: 2vw;
  border-radius: 2.5vw;
}

.con17__filter-option {
  border-radius: 1.5vw;
  padding: 2.5vw 3vw;
}

.con17__map {
  height: 70vw;
}

/* IMG:AUTO 래퍼 폭은 calc(var(--px)*N) — 모바일서 접힘 → 해제, 크기는 img 소유 */
.con17__store-more-mark,
.con17__filter-arrow,
.con17__search-mark {
  width: auto;
  aspect-ratio: auto;
}

.con17__store-more-mark img {
  width: 9.6vw;
  height: auto;
}

.con17__filter-arrow img {
  width: 4.27vw;
  height: auto;
}

.con17__search-mark img {
  width: 8.27vw;
  height: auto;
}

/* PC padding(--px*16)이 3.15px 로 접혀 띠가 텍스트에 붙었다 */
.con17__footer-band {
  padding: 3.2vw 0;
}

/* 하단 띠 배경 — 텍스트 2줄로 늘어나는 band 높이를 그대로 채움 */
.con17__footer-bg {
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.con17__footer-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 매장 상세 팝업 — row → column */
.con17__pop {
  flex-direction: column;
  width: 88vw;
  max-width: 88vw;
  padding: 5vw;
  border-radius: 5vw;
}

.con17__pop-photo {
  width: 100%;
  border-radius: 4vw;
}

/* top/right 도 --px 축이라 4px 로 접혀 모서리에 붙는다 */
.con17__pop-close {
  top: 4vw;
  right: 5vw;
}

.con17__pop-body {
  padding-right: 0;
  padding-left: 0;
  margin-top: 4vw;
}

/* --px 축 붕괴로 사라지는 팝업 내부 간격·라벨폭 재지정 */
.con17__pop-name {
  margin-top: 4vw;
}

.con17__pop-line {
  margin-top: 4vw;
}

.con17__pop-row {
  margin-top: 2vw;
}

.con17__pop-addr {
  margin-top: 4vw;
}

.con17__pop-label {
  width: auto;
  min-width: 12vw;
}

.con17__pop-naver {
  gap: 1vw;
  margin-top: 6vw;
  padding: 2vw 4vw;
  border-radius: 2vw;
}

.con17__pop-naver-chev {
  width: 4vw;
}

/* ===== con18 ===== */
.con18__content {
  padding: 64vw 6vw 14vw;
  margin-bottom: 12vw;
}

/* 액자 9-slice — slice 는 con17_04(1486×1639) 실측 계단코너(상 160·좌우 140·하 95), width 는 92vw/1486 등비 */
.con18__frame {
  left: 4vw;
  right: 4vw;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: 9.906vw 8.668vw 5.882vw;
  border-image: url(/images/con17_04.webp) 160 140 95 fill / 9.906vw 8.668vw 5.882vw stretch;
}

/* 누룽지 손사진 — 위 섹션 bleed 유지 + 가로 중앙 */
.con18__dish {
  left: 50%;
  top: -16.8vw;
  width: auto;
  aspect-ratio: auto;
  transform: translateX(-50%);
}

.con18__dish img {
  width: 90vw;
  height: auto;
}

/* align-items:center 부모 아래라 폭이 max-content — 자식 flex:1 이 무한팽창해 폭 고정 필요.
   PC 처럼 꽃문양 중심이 액자 세로선(4.56vw) 위에 얹히도록 content 좌우 padding 밖으로 넓힌다 */
.con18__banner {
  width: calc(100% + 6.9vw);
  margin-inline: -3.45vw;
  gap: 3vw;
}

.con18__banner-mark {
  width: auto;
  aspect-ratio: auto;
  margin-top: 6.7vw;
}

.con18__banner-mark img {
  width: 4vw;
  height: auto;
}

.con18__banner-body {
  width: auto;
  flex: 1;
  min-width: 0;
  padding: 3vw 0 4vw;
}

.con18__head {
  margin-top: 8vw;
  gap: 3vw;
}

.con18__story {
  margin-top: 8vw;
  gap: 4vw;
}

.con18__story-pledge {
  margin-top: 5vw;
}

/* con19 — 창업문의 */
/* PC 가 .con19 네이티브 중첩이라 접두로 구체성 (0,2,0) 정렬 */
.con19 .con19_iner {
  padding: 12vw 5vw 10vw;
  gap: 8vw;
  align-items: center;
}

.con19 .con19__visual {
  position: relative;
}

.con19 .con19__photo-frame {
  width: 90vw;
  aspect-ratio: 16 / 9;
  border-radius: 3vw;
}

/* PC 크롭 재현 — 이미지를 프레임보다 크게 두고 잘라낸다(cover 는 전장을 축소해 상차림이 다 들어왔다) */
.con19 .con19__photo {
  top: -3.17vw;
  right: -2.48vw;
  width: 102.5vw;
}

.con19 .con19__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 初心 = 뒷배경 워터마크 — .front 스택 최하층(bg_img 위·사진 뒤) */
.con19 .con19__seal {
  position: absolute;
  top: -10vw;
  right: -4vw;
  z-index: -1;
  width: auto;
  aspect-ratio: auto;
  margin-top: 0;
}

.con19 .con19__seal img {
  width: 14vw;
  height: auto;
}

.con19 .con19__copy {
  align-items: center;
  gap: 3vw;
}

.con19 .con19__form {
  position: relative;
  right: auto;
  bottom: auto;
  width: 90vw;
  padding: 8vw 6vw;
  border-radius: 4vw;
}

.con19 .con19__field,
.con19 .con19__field--type,
.con19 .con19__field--message {
  padding: 3vw 0 3vw 2vw;
}

.con19 .con19__field--type,
.con19 .con19__field--message {
  padding-bottom: 3vw;
}

.con19 .con19__field-label {
  width: auto;
  min-width: 26vw;
  text-align: left;
}

.con19 .con19__field-input,
.con19 .con19__field-textarea {
  width: auto;
  flex: 1;
}

.con19 .con19__field-textarea {
  padding-bottom: 3vw;
  max-height: 26vw;
}

.con19 .con19__type-group {
  gap: 2vw;
  flex: 1;
}

.con19 .con19__type {
  flex: 1;
  padding: 2vw 0;
  border-radius: 1.5vw;
}

.con19 .con19__agree {
  gap: 2vw;
}

.con19 .con19__agree-check {
  width: 4vw;
}

.con19 .con19__submit {
  padding: 4vw 0;
  border-radius: 2.5vw;
}

}